<template>
  <div class="p-3">
    <a-card>
      <a-table :columns="columns" :data-source="TableData">
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" @click="onAdd(record, 'add')">添加</a-button>
            <a-button type="link" @click="onEdit(record, 'edit')"
              >修改</a-button
            >
            <a-popconfirm
              title="确定要删除吗？"
              placement="bottom"
              @confirm="onDel(record, 'del')"
            >
              <template #icon
                ><question-circle-outlined style="color: red"
              /></template>
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal
      :title="modalTitle"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form>
        <a-form-item label="公司名称">
          <a-input v-model:value="ComanyName" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
  getCompanyTree,
  addSubCompany,
  updateCompanyName,
  deleteCompany,
} from '#/api/core/develop';
import { message } from 'ant-design-vue';

const visible = ref(false);
const modalTitle = ref('添加子公司');
const modelType = ref('add');
const recordInfo = ref();
const columns = [
  {
    title: '公司名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '公司层级',
    dataIndex: 'level',
    key: 'level',
    align: 'center',
  },
  {
    title: '公司id',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
  },
];
const TableData = ref([]);
const ComanyName = ref('');
const getTableData = () => {
  getCompanyTree().then((res: any) => {
    console.log(res);
    // 递归处理树形数据，保持层级结构
    const processTreeData = (tree: any[]): any[] => {
      return tree.map((item: any) => {
        const processedItem = {
          key: item.id,
          name: item.name,
          level: item.level,
          id: item.id,
        };

        // 如果存在children，递归处理子节点
        if (item.children && item.children.length > 0) {
          processedItem.children = processTreeData(item.children);
        }

        return processedItem;
      });
    };

    const treeData = processTreeData([res.data]);
    TableData.value = treeData;
    console.log(treeData);
  });
};
getTableData();
const handleOk = () => {
  if (modelType.value === 'add') {
    const data = {
      id: recordInfo.value.id,
      name: ComanyName.value,
      levels: recordInfo.value.level,
    };
    addSubCompany(data).then((res: any) => {
      console.log(res);
      if (res.data.data.data == '1') {
        visible.value = false;
        message.success('添加成功');
        getTableData();
      } else {
        message.error('添加失败');
      }
    });
  } else if (modelType.value === 'edit') {
    const data = {
      id: recordInfo.value.id,
      name: ComanyName.value,
      levels: recordInfo.value.level,
    };
    updateCompanyName(data).then((res: any) => {
      console.log(res);
      if (res.data.data.data == '1') {
        visible.value = false;
        message.success('修改成功');
        getTableData();
      } else {
        message.error('修改失败');
      }
    });
  } else if (modelType.value === 'del') {
  }
};
const onAdd = (record: any, type: string) => {
  visible.value = true;
  recordInfo.value = record;
  modalTitle.value = '添加子公司';
  modelType.value = type;
};
const onEdit = (record: any, type: string) => {
  visible.value = true;
  recordInfo.value = record;
  ComanyName.value = record.name;
  modalTitle.value = '修改子公司';
  modelType.value = type;
};
const onDel = (record: any) => {
  deleteCompany(record.id).then((res: any) => {
    console.log(res);
    if (res.data.data.data == '1') {
      visible.value = false;
      message.success('删除成功');
      getTableData();
    } else {
      message.error('删除失败');
    }
  });
};
const handleCancel = () => {
  visible.value = false;
};
</script>
<style scoped></style>
